<template>
	 <view class="container">
	     <view class="box-bg">
	       <uni-nav-bar shadow left-icon="left" right-icon="cart" title="全部服务" />
	     </view>
	     <!-- 搜索框 -->
	     <view class="search-bar" @click="onSearch">
	           <input type="text" placeholder="请输入搜索关键词" v-model="searchKeyword" />
	           <image src="../../static/1_搜索.png" class="select"></image>
	         </view>
	 
	     <!-- 分类菜单 -->
	     <view class="menu">
	       <view v-for="(item, index) in menuItems" :key="index" @click="onMenuItemClick(item)" :class="{ 'active': activeMenu === item }" class="menu-item">
	         <text>{{ item }}</text>
	       </view>
	     </view>
	 
	     <!-- 服务列表 -->
	     <view class="service-list">
	       <view v-for="(service, index) in currentServices" :key="index" @click="onServiceClick(index)" class="service-item">
	         <image :src="service.image" class="service-image" />
	         <view class="service-info">
	           <text>{{ service.name }}</text>
	           <text class="price">{{ service.price }}</text>
	         </view>
	       </view>
	     </view>
	   </view>
</template>

<script>
	import {
		orderById,
	} from "@/api/order.js";
	export default {
	  data() {
	    return {
	      activeMenu: "防水补漏", // 默认激活的菜单项
		  expandedItem: null, // 用于存储当前展开的文字
		  searchKeyword: "", // 添加初始值
	      menuItems: ["防水补漏", "墙面翻新", "水电维修", "门窗维修", "家电维修"],
	      services: {
	        "防水补漏": [
	          { name: "卫生间补漏", price: "11元预约", image: "../../static/疏通马桶.png" },
	          { name: "厨房补漏", price: "22元预约", image: "../../static/疏通马桶.png" },
	          { name: "厕所补漏", price: "33元预约", image: "../../static/疏通马桶.png" },
	          { name: "阳台补漏", price: "44元预约", image: "../../static/疏通马桶.png" },
	          { name: "屋顶补漏", price: "55元预约", image: "../../static/疏通马桶.png" }
	        ],
	        "墙面翻新": [
	          { name: "客厅翻新", price: "66元预约", image: "../../static/疏通马桶.png" },
	          { name: "卧室翻新", price: "77元预约", image: "../../static/疏通马桶.png" },
			  { name: "阳台翻新", price: "88元预约", image: "../../static/疏通马桶.png" },
			  { name: "走廊翻新", price: "99元预约", image: "../../static/疏通马桶.png" },
			  { name: "厕所翻新", price: "100元预约", image: "../../static/疏通马桶.png" }
	          // 添加更多墙面翻新的服务项
	        ],
			"水电维修":[
				{ name: "厕所漏水", price: "120元预约", image: "../../static/疏通马桶.png" },
				{ name: "厨房漏水", price: "140元预约", image: "../../static/疏通马桶.png" },
				{ name: "阳台漏水", price: "23元预约", image: "../../static/疏通马桶.png" },
				{ name: "水管维修", price: "45元预约", image: "../../static/疏通马桶.png" },
				{ name: "卧室电路", price: "34元预约", image: "../../static/疏通马桶.png" }
			],
			"门窗维修":[
				{ name: "防盗锁", price: "45元预约", image: "../../static/疏通马桶.png" },
				{ name: "指纹说", price: "56元预约", image: "../../static/疏通马桶.png" },
				{ name: "密码锁", price: "76元预约", image: "../../static/疏通马桶.png" },
				{ name: "天窗", price: "45元预约", image: "../../static/疏通马桶.png" },
				{ name: "落地窗", price: "56元预约", image: "../../static/疏通马桶.png" }
			],
			"家电维修":[
				{ name: "洗衣机维修", price: "38元预约", image: "../../static/疏通马桶.png" },
				{ name: "电路检查", price: "95元预约", image: "../../static/疏通马桶.png" },
				{ name: "灯泡维修", price: "56元预约", image: "../../static/疏通马桶.png" },
				{ name: "冰箱维修", price: "76元预约", image: "../../static/疏通马桶.png" },
				{ name: "电脑维修", price: "43元预约", image: "../../static/疏通马桶.png" }
			]
	        // 为其他菜单项添加对应的服务项
	      }
	    };
	  },
	  mounted() {
	  	// 发请求 返回
		// 为service赋值
	  },
	  computed: {
	    currentServices() {
	      return this.services[this.activeMenu] || [];
	    }
	  },
	  methods: {
		  //listprorel方法
	    onSearch() {
			this.searchKeyword = '';
	         if (this.searchKeyword.trim()) { // 如果有搜索关键词
	           uni.navigateTo({
	             url: `pages/eacher/eacher?keyword=${encodeURIComponent(this.searchKeyword)}`// 跳转到搜索页面并传递关键词
	           });
			   uni.navigateTo({
			           url: '/pages/eacher/eacher'
			         });
	         }else{
				  uni.navigateTo({
				         url: '/pages/eacher/eacher'
				       });
			 }
	       },
	    onMenuItemClick(menuItem) {
	      this.activeMenu = menuItem;
	           this.expandedItem = menuItem; // 更新展开的文字
	           setTimeout(() => {
	             this.expandedItem = null; // 动画结束后重置
	           }, 500); // 与CSS动画持续时间一致
	           console.log('分类菜单点击，项目:', menuItem);
	         },
	    onServiceClick(index) {
	      this.$router.push('/pages/categoryy/categoryy')
	    }
	  }
	}
</script>

<style scoped>
	
	 /* 原有的样式保持不变 */
	  .menu-item.active {
	    color:#7a76fa; /* 可以更改颜色或其他样式来突出当前选中的菜单项 */
	  }
	
	  .menu-item.expand-text {
	    animation: expandText 0.5s ease-out;
	  }
	
	  @keyframes expandText {
	    0% {
	      transform: scale(1);
	    }
	    50% {
	      transform: scale(1.2);
	    }
	    100% {
	      transform: scale(1);
	    }
	  }
	.container {
	  display: flex;
	  flex-direction: column;
	}
	
	.header {
	  display: flex;
	  justify-content: space-between;
	  padding: 10px;
	  background-color: #7a76fa;
	}
	
	.search-bar {
	  display: flex;
	  padding: 10px;
	}
	
	.search-bar input {
	  flex: 1;
	  margin-right: 10px;
	}
	
	.menu {
	  display: flex;
	  flex-direction: column;
	  background-color: #f4f4f4;
	  padding: 10px;
	}
	
	.menu-item {
	  padding: 10px;
	  border-bottom: 0px solid #7a76fa;
	  width: 80px;
	  height: 30px;
	  
	}
	
	.service-list {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
	  padding: 10px;
	  margin-left: 50%;
	  margin-top: -70%;
	}
	
	.service-item {
	  width: 100%;
	  margin-bottom: 10px;
	  background-color: #7a76fa;
	  border-radius: 8px;
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	  padding: 10px;
	  
	  
	}
	
	.service-image {
	  width: 100%;
	  height: 120px;
	  object-fit: cover;
	  border-radius: 8px;
	}
	
	.service-info {
	  display: flex;
	  justify-content: space-between;
	  margin-top: 10px;
	}
	
	.price {
	  color: red;
	}
	.select{
		height: 50rpx;
		width: 50rpx;
	}
</style>